<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        data与el的两种写法:
            1. el有两种写法
                    (1).new Vue时配置el属性
                    (2).先创建一个Vue实例,将Vue实例赋值给一个变量,随后再通过vm.$mount('#root')指定el的值  指定这个实例对象为哪个容器服务
            2.data有两种写法
                    (1) 对象式
                    (1) 函数式
                    如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
            3.一个重要的原则:
                    由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了.


            
     -->


    <!--准备好一个容器-->
    <div id="root">
        <h1>你好 {{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    // 创建一个vue实例
    // el的两种写法
   /* const v = new Vue({
        //el:'#root', // el第一种写法
        data:{
            name:'南风'
        }
    })
    console.log(v)  
    v.$mount('#root') // el第二种写法：也能找到相关的容器  $mount挂载的方式*/

    // data的两种写法
    new Vue({
        el:'#root',
        // data的第一种写法： 对象式
       /*data:{
            name:'南风'
        } */
        
         // data的第二种写法： 函数式  必须有return返回值 return中是我们需要的属性值
         data(){
             console.log('@@@',this); // 此处的this是Vue实例对象
             return{
                 name:'南风'
             }
         }
    })
    
    
</script>
</html>
